import React from 'react';
import {ConfigProvider, App as AppProvider, theme} from "antd";
import {RootState, useSelector} from "@/store/index.ts";
import {HappyProvider} from "@ant-design/happy-work-theme";
import {RefreshProvider} from "@/context/Refresh.tsx";
import zhCN from 'antd/locale/zh_CN';
import Router from "@/router/index.tsx"

const App = () => {
    const {
        isDark,
        primary,
        isHappy,
        componentSize,
        compactAlgorithm,
        borderRadius,
    } = useSelector((state: RootState) => state.globalSlice)
    const algorithm = () => {
        const algorithmArr = isDark ? [theme.darkAlgorithm] : [theme.defaultAlgorithm];
        if (compactAlgorithm) algorithmArr.push(theme.compactAlgorithm);
        return algorithmArr;
    };

    return (
        <ConfigProvider
            locale={zhCN}
            componentSize={componentSize}
            autoInsertSpaceInButton={true}
            theme={{token: {colorPrimary: primary, borderRadius}, algorithm: algorithm()}}
        >
            <HappyProvider disabled={!isHappy}>
                <AppProvider>
                    <RefreshProvider>
                        <Router/>
                    </RefreshProvider>
                </AppProvider>
            </HappyProvider>
        </ConfigProvider>
    );
}
export default App;
